<template>
  <div class="home view">
    <div class="header">
      <div class="header-content">
        <h1>0-3岁阶段式家庭辅育服务</h1>
        <h6>我们专注于为忙碌的父母提供家庭婴幼儿看护、辅食制作、早教互动等辅育服务</h6>
        <div class="btns flex">
          <div class="btn-item flex primary">
            <span>了解详情</span>
            <img src="/images/home/detail.png" alt="">
          </div>
          <div class="btn-item flex plain">
            <span>联系我们</span>
            <img src="/images/home/connect.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="first-box">
      <div class="first-box__content">
        <div class="first-box__content-item">
          <div class="title">为宝宝各成长阶段提供专业技能匹配的家庭育婴员</div>
          <div class="list">
            <div
              class="list-item"
              v-for="item in list"
              :style="{ backgroundImage: `url(/images/home/card-bg-${item.key}.png)` }"
              :key="item.key">
              <div class="model" :style="{ '--color': item.color }" />
              <div class="list-item-content">
                <img
                  :style="{ '--width': item.iconWidth }"
                  :src="`/images/home/card-icon-${item.key}.png`" alt="">

                <div class="text-box">
                  <div class="text-box-title">{{ item.label }}</div>
                  <div class="text-box-msg">{{ item.msg }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="first-box__content-item">
          <div class="title second">为不同的家庭需求提供不同时间段的育婴服务</div>

          <div class="btn-box flex">
            <div class="btn-box-item" v-for="(item, index) in btnList" :key="index">
              <div class="btn-box-item__title">{{ item.title }}</div>
              <div class="box flex">
                <div class="box-left">
                  <div class="box-left__title">{{ item.label }}</div>
                  <div class="box-left__msg">{{ item.msg }}</div>
                </div>
                <div class="btn">预约</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="second-box">
      <div class="second-box__title">育婴员计划驱动型工作模式</div>
      <div class="second-box__msg">在这种模式下，育婴师按照预先制定的工作计划来执行育婴服务，并在每天工作结束后 上传工作日志，以确保工作内容的完成和记录。</div>
      <div class="second-box-table">
        <table>
          <thead>
            <tr>
              <td
                v-for="item in header"
                :key="item.prop"
                :width="item.width">
                {{ item.label }}
              </td>
            </tr>
          </thead>
          <tbody v-show="data && data.length">
            <tr v-for="item in data" :key="item.id">
              <td v-for="i in header" :key="i.prop">{{ item[i.prop] || '--' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="container">
      <div class="third-box">
        <div class="third-box__title">每周辅食计划</div>
        <div class="third-box__msg">家长可与育婴员协同制定宝宝一周的营养计划</div>
        <div class="third-box__btn yellow">了解更多</div>
        <div class="third-box__table">
          <table>
            <thead>
            <tr>
              <td
                v-for="(item, index) in thirdHeader"
                :key="item.prop"
                :class="{ triangle: index === 0 }"
                :width="item.width">
                <div v-if="index !== 0">
                  <span>第</span>
                  <span :class="{ num: index !== 0 }">{{ item.label }}</span>
                  <span>顿</span>
                </div>
                <template class="triangle" v-else>
                  <div class="triangle-top">餐次</div>
                  <div class="triangle-bottom">周次</div>
                </template>
              </td>
            </tr>
            </thead>
            <tbody v-show="thirdData && thirdData.length">
            <tr v-for="item in thirdData" :key="item.id">
              <td v-for="i in thirdHeader" :key="i.prop">
                <span :class="{ active: ['second', 'four', 'six'].includes(i.prop) }">{{ item[i.prop] || '--' }}</span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <div class="third-box__title">点餐模式</div>
        <div class="third-box__msg">家长可与育婴员协同制定宝宝一周的营养计划</div>
        <div class="third-box__btn">了解更多</div>

        <div class="third-box__img-box">
          <div class="position">
            <img src="/images/home/phone.png" alt="">
            <div class="position-title">点餐模式</div>
            <div class="position-msg">Ordering mode</div>
            <div class="position-second-msg">家长可与育婴员协同制定宝宝一周的营养计划</div>
          </div>
         </div>
      </div>

      <div class="footer">
        <app-footer />
      </div>
    </div>

  </div>
</template>

<script setup>
const list = [
  { label: '2-6个月', msg: '婴儿·精细保育', key: 'first', color: '#B69E97', iconWidth: '0.4rem' },
  { label: '6-12个月', msg: '婴儿·食育探索', key: 'second', color: '#B6AD97', iconWidth: '0.68rem' },
  { label: '12-24个月', msg: '幼儿·启蒙之旅', key: 'third', color: '#97B6AE', iconWidth: '0.55rem' },
  { label: '24-36个月', msg: '幼儿·家园衔接', key: 'four', color: '#A797B6', iconWidth: '0.65rem' },
]

const header = [
  { label: '时间段', prop: 'time', width: '25%' },
  { label: '工作内容', prop: 'content', width: '75%' },
]

const thirdHeader = [
  { label: '餐次', prop: 'time' },
  { label: '1', prop: 'first' },
  { label: '2', prop: 'second' },
  { label: '3', prop: 'third' },
  { label: '4', prop: 'four' },
  { label: '5', prop: 'five' },
  { label: '6', prop: 'six' },
]

const thirdData = [
  { time: '周一', first: '蛋黄小白菜烂面条(P069)', second: '母乳或配方奶', third: '紫菜手卷(P106)', four: '母乳或配方奶', five: '苹果1块紫薯泥(PO55)', six: '母乳或配方奶'  },
  { time: '周二', first: '小馄饨(P104)', second: '母乳或配方奶', third: '紫菜手卷(P106)', four: '母乳或配方奶', five: '圣女果1颗、金枪鱼土豆泥(P109 )', six: '母乳或配方奶'  },
  { time: '周三', first: '彩椒鸡丝面(P092)', second: '母乳或配方奶', third: '紫菜手卷(P106)', four: '母乳或配方奶', five: '猕猴桃 1片、牛肉汁蒸山药泥(P071)', six: '母乳或配方奶'  },
  { time: '周四', first: '什锦小软面(P105)', second: '母乳或配方奶', third: '南瓜拌软饭(P104)', four: '母乳或配方奶', five: '香蕉半根、银耳羹(P091)', six: '母乳或配方奶'  },
  { time: '周五', first: '猫耳朵(P105)', second: '母乳或配方奶', third: '蛋黄虾皮粥(P088)蒸素三丁(P111)', four: '母乳或配方奶', five: '香蕉半根、什锦豆腐羹(P090)', six: '母乳或配方奶'  },
  { time: '周六', first: '香煎小土豆饼(P108)菠菜泥大米粥(PO56)', second: '母乳或配方奶', third: '彩虹杂蔬软饭(P102)', four: '母乳或配方奶', five: '香甜水果羹( P091 )', six: '母乳或配方奶'  },
  { time: '周日', first: '双色蒸糕(Po95)菠菜泥大米粥(PO56)', second: '母乳或配方奶', third: '手抓软米饭(P103)多蔬碎摊蛋黄(P110)', four: '母乳或配方奶', five: '缤纷蔬果沙拉( P093 )', six: '母乳或配方奶'  },
]

const data = [
  { time: '早上7:00-8:00', content: '⓵婴儿起床、更换尿布、清洁婴儿身体    ⓶为婴儿准备早餐' },
  { time: '早上8:00-9:00', content: '⓵喂养婴儿早餐    ⓶清洁餐具和喂食区域' },
  { time: '早上9:00-10:00', content: '⓵与婴儿互动，进行早间游戏或阅读活动    ⓶监测婴儿的发展里程碑' },
  { time: '早上10:00-11:00', content: '⓵准备并喂养婴儿上午的小吃    ⓶安排婴儿的小憩时间' },
  { time: '上午11:00-12:00', content: '⓵婴儿午睡期间的安静活动，如轻柔的音乐或白噪音   ⓶环境清洁和消毒' },
  { time: '中午12:00-13:00', content: '⓵为婴儿准备并喂养午餐    ⓶清洁餐具和喂食区域' },
  { time: '下午13:00-14:00', content: '⓵安排婴儿午睡时间    ⓶记录婴儿的饮食和睡眠情况' },
  { time: '下午14:00-15:00', content: '⓵婴儿午睡醒来后的护理，如更换尿布、轻柔活动    ⓶准备并喂养下午的小吃' },
]

const btnList = [
  { title: '全日制', label: 'Full-time', msg: '分享和发现世界的精彩' },
  { title: '白班', label: 'Day shift', msg: '分享和发现世界的精彩' },
]
</script>

<style lang="less" scoped>
.home {
  table, th, td {
    border: 1px solid #CEC9C1;
    border-collapse: collapse;
  }

  .header {
    height: 6.9rem;
    width: 100%;
    background: url('/images/home/first-bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;

    .header-content {
      position: absolute;
      left: 6.65rem;
      top: 2.39rem;
      text-align: center;

      h1 {
        font-weight: 600;
        font-size: .52rem;
        color: #FFFFFF;
        margin-bottom: .12rem;
      }

      h6 {
        font-weight: 300;
        font-size: .16rem;
        color: #FFFFFF;
        margin-bottom: .81rem;
      }

      .btns {
        .btn-item {
          height: .44rem;
          font-weight: 500;
          font-size: .16rem;
          color: #FFFFFF;
          border-radius: .22rem;
          padding: 0 .24rem 0 .34rem;
          cursor: pointer;

          &:first-child {
            margin-right: 0.15rem;
          }

          &.primary {
            background: #CF8E79;
          }

          &.plain {
            background: rgba(255, 255, 255, 0.1);
            border: 0.02rem solid #FFFFFF;
          }

          img {
            width: .18rem;
            height: .18rem;
            margin-left: .1rem;
          }
        }
      }
    }
  }

  .first-box {
    height: 11.87rem;
    width: 100%;
    position: relative;
    background: #F6F5F2;

    &__content {
      position: absolute;
      left: 3.58rem;
      top: .55rem;
      width: 12.5rem;

      &-item {
        margin-bottom: .9rem;

        &:last-child {
          margin-bottom: 0;
        }

        .title {
          font-size: .4rem;
          width: 4.4rem;
          line-height: .49rem;
          color: #8D7871;
          font-weight: bold;
          margin: 0 auto;

          &.second {
            width: 4rem;
            margin-bottom: .79rem;
          }
        }

        .list {
          display: flex;
          margin-top: .66rem;

          .list-item {
            flex: 1;
            margin-right: .2rem;
            height: 4.2rem;
            background-size: 100% 100%;
            position: relative;

            .model {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: linear-gradient(rgba(189, 170, 146, 0) 0%, var(--color) 100%);
            }

            .list-item-content {
              position: absolute;
              left: .37rem;
              top: calc(50% - .4rem);

              img {
                width: var(--width);
                height: auto;
                display: block;
              }

              .text-box {
                margin-top: .4rem;
                color: #FFFFFF;
                line-height: .3rem;

                &-title {
                  font-size: .3rem;
                  font-weight: 600;
                }

                &-msg {
                  font-size: .16rem;
                  font-weight: 400;
                }
              }
            }

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .btn-box {
          .btn-box-item {
            flex: 1;
            height: 2.07rem;
            background: #EEE9E0;
            border-radius: 0.08rem;
            padding: .23rem .51rem .4rem .33rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #333333;
            font-weight: 600;

            &:last-child {
              background: #F4F2EE;
            }

            &__title {
              font-size: .24rem;
              padding-bottom: .14rem;
              border-bottom: 1px solid #E7E6E4;
            }

            .box {
              align-items: flex-end;
              justify-content: space-between;

              .box-left__title {
                font-size: .3rem;
              }

              .box-left__msg {
                font-size: .14rem;
              }

              .btn {
                width: 1.83rem;
                height: .54rem;
                background: #CF8E79;
                border-radius: 1rem;
                color: #FFFFFF;
                font-size: .18rem;
                text-align: center;
                line-height: .54rem;
                cursor: pointer;
              }
            }

            &:first-child {
              margin-right: .21rem;
            }
          }
        }
      }
    }
  }

  .second-box {
    height: 9.42rem;
    background: url('/images/home/second-bg.png') no-repeat;
    background-size: 100% 100%;
    padding-top: .77rem;
    text-align: center;

    &__title {
      font-size: .4rem;
      font-weight: 600;
      color: #7A625B;
      margin-bottom: .3rem;
    }

    &__msg {
      font-weight: 400;
      font-size: .16rem;
      width: 6.08rem;
      margin: 0 auto;
      color: #A19790;
    }

    .second-box-table {
      width: 12.04rem;
      height: 4.98rem;
      padding: .16rem;
      background: #E3DFD8;
      margin: .84rem auto 0 auto;
      border-radius: 0.08rem;

      table {
        width: 100%;
        height: 100%;
        background: #7A625B;
        font-size: .16rem;
        color: #F2E9E3;
        border-radius: 0.08rem;

        tbody {
          tr, td {
            font-weight: 300;
          }
        }

        thead {
          height: .64rem;
          font-size: .18rem;
        }
      }
    }
  }

  .container {
    background: linear-gradient(180deg, #F6F5F2 0%, rgba(255, 255, 255, 0) 75%, #B69E97 100%);

    .third-box {
      height: 12.79rem;
      padding-top: .87rem;
      text-align: center;

      &__table {
        width: 12.04rem;
        height: 4.99rem;
        background: #EBE4E1;
        border-radius: 0.08rem;
        padding: .16rem;
        margin: .52rem auto .55rem auto;

        table {
          width: 100%;
          height: 100%;
          color: #F2E9E3;
          font-size: .16rem;
          border-radius: 0.08rem;
          table-layout: fixed;

          tbody {
            background: rgba(174, 156, 124, .9);
            tr {
              td {
                span {
                  font-weight: 300;

                  &.active {
                    color: #F4E8B6;
                    font-weight: 500;
                  }
                }
              }
            }
          }

          thead {
            background: rgba(174, 156, 124, 1);
            height: .64rem;
            font-size: .18rem;

            td {
              .num {
                font-size: .32rem;
                margin: 0 .06rem;
              }

              &.triangle {
                position: relative;
                background: linear-gradient(20deg, transparent 48.5%, #CEC9C1 49.5%, #CEC9C1 36.5%, transparent 51.5%);

                .triangle-top, .triangle-bottom {
                  position: absolute;
                  display: inline-block;
                }

                .triangle-top {
                  top: 0.07rem;
                  right: .2rem;
                  text-align: right;
                }

                .triangle-bottom {
                  bottom: 0.07rem;
                  left: .2rem;
                  text-align: left;
                }
              }
            }
          }
        }
      }

      &__title {
        font-weight: 600;
        font-size: .4rem;
        color: #2E2E2E;
        line-height: .49rem;
        margin-bottom: .15rem;
      }

      &__msg {
        font-weight: 400;
        font-size: .16rem;
        color: #C9B7B7;
        line-height: .22rem;
        margin-bottom: .34rem;
      }

      &__btn {
        width: 1.83rem;
        height: .54rem;
        line-height: .54rem;
        color: #FFFFFF;
        margin: 0 auto;
        font-size: .18rem;
        border-radius: .27rem;
        background: #A99AB3;
        cursor: pointer;

        &.yellow {
          background: #C19E70;
        }
      }

      &__img-box {
        width: 12.04rem;
        height: 4.54rem;
        background: url('/images/home/img-box-bg.png') no-repeat;
        background-size: 100% 100%;
        margin: .38rem auto 0 auto;
        position: relative;

        .position {
          position: absolute;
          left: .88rem;
          top: 1.11rem;
          text-align: left;

          img {
            width: .8rem;
            height: 1.11rem;
            display: block;
          }

          &-title {
            font-weight: 600;
            font-size: .52rem;
            color: #FFFFFF;
            margin-top: .31rem;
          }

          &-msg {
            font-weight: 300;
            font-size: .30rem;
            color: #FFFFFF;
            line-height: .3rem;
          }

          &-second-msg {
            font-weight: 400;
            font-size: .22rem;
            color: #FFFFFF;
            line-height: .3rem;
            margin-top: .21rem;
          }
        }
      }
    }

    .footer {
      height: 7.97rem;
      position: relative;

      .app-footer {
        position: absolute;
        left: 50%;
        top: 3.79rem;
        transform: translateX(-50%);

        :deep(.top) {
          border-bottom-color: #D8C7C3;
        }
      }
    }
  }
}
</style>
